import React, { Component } from 'react'
import PropTypes from 'prop-types';  

class Live extends Component {
  constructor (props) {
    super(props)
    this.state = {
      inputText: props.srcText
    }
  }
  
  componentWillMount () {
    console.log('componentWillMount');
  }
  componentDidMount() {
    console.log('componentDidMount');
  }
  componentWillReceiveProps(nextProps) {
    console.log('component Will ReceiveProps');
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    // 优化
    // console.log();
    // console.log(nextProps, nextState);
    // console.log(nextProps.pcname);
    // console.log(this.props.pcname);
    // if (nextProps.pcname === this.props.pcname) {
    //   return false;
    // }
    
    return true;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate');
    
  }
  componentWillUnmount () {
    console.log('componentWillUnmount');
    
  }
  
  handleText (event) {

    this.setState({
      inputText: event.target.value
    })
    this.props.handleEvent(event.target.value)
  }
  
  render() {
    return (
      <div>
        {this.props.pcname}
        <input type="text" value={this.state.inputText} onChange={(event)=>{this.handleText(event)}}/>
      </div>
    )
  }
}

Live.propTypes = {
  srcText: PropTypes.string
}

export default Live